<template>
  <div class="gallery-selector-container flex">
    <div
      v-for="(item, index) in imageList"
      :key="index"
      class="gallery-selector"
      :style="{ width: imageWidth, height: imageHeight, fontSize: fontSize }"
    >
      <img class="img" :src="item" />
      <div class="handle">
        <a-icon
          type="delete"
          style="cursor: pointer;"
          @click="deleteHandle(index)"
        />
      </div>
    </div>
    <div
      class="gallery-selector"
      :style="{ width: imageWidth, height: imageHeight, fontSize: fontSize }"
      @click="galleryVisiable = true"
    >
      <a-icon type="plus" />
    </div>
    <Base-Gallery
      v-model="galleryVisiable"
      :tab="tabIndex"
      @select="selectHandle"
    />
  </div>
</template>

<script>
import clonedeep from 'lodash.clonedeep'
export default {
  name: 'GallerySelectorMultiple',
  model: {
    prop: 'imageList',
    event: 'change'
  },
  props: {
    // 选择tab值
    tabIndex: {
      type: Number,
      default: 5
    },
    // 图片地址
    imageList: {
      type: Array,
      default: () => []
    },
    // 图片宽度
    imageWidth: {
      type: String,
      default: '104px'
    },
    // 图片高度
    imageHeight: {
      type: String,
      default: '104px'
    },
    fontSize: {
      type: String,
      default: '40px'
    }
  },
  data() {
    return {
      galleryVisiable: false
    }
  },
  methods: {
    deleteHandle(index) {
      const imageList = clonedeep(this.imageList)
      imageList.splice(index, 1)
      this.$emit('change', imageList)
    },
    selectHandle(imageSrc) {
      const imageList = clonedeep(this.imageList)
      imageList.push(imageSrc)
      this.$emit('change', imageList)
    }
  }
}
</script>

<style lang="less" scoped>
.gallery-selector {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  border: 1px dotted #d9d9d9;
  background-color: #fafafa;
  color: #999999;
  padding: 5px;
  margin-right: 10px;
  position: relative;
  .img {
    display: block;
    width: 100%;
    height: 100%;
  }
  .handle {
    display: none;
    position: absolute;
    width: 100%;
    height: 100%;
    justify-content: center;
    align-items: center;
    font-size: 20px;
    background-color: rgba(0, 0, 0, 0.3);
    color: #fff;
  }
  &:hover {
    .handle {
      display: flex;
    }
  }
}
</style>
